<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/assets/view/base/tag.jsp" %>
<!DOCTYPE html>
<head>
    <jsp:include page="/assets/view/common/head-meta.jsp"/>
    <title>mrcode-博文编辑</title>
    <link rel="stylesheet" href="/assets/lib/md/css/style.css"/>
    <link rel="stylesheet" href="/assets/lib/md/css/editormd.css"/>
    <jsp:include page="/assets/view/common/head-ui.jsp"/>
    <style>
        @media (min-width: 1400px) {
            .container {
                width: 100%;
            }
        }

        @media (min-width: 1840px) {
            .container {
                width: 100%;
            }
        }
        body{
            padding-top: 0;
        }
    </style>
</head>
<body>
<div class="container" style="width:100%">
    <div class="row-fluid">
        <div class="panel panel-info">
            <strong>编辑器换肤：</strong>

            工具栏：<select id="editormd-theme-select">
            <%--<option selected="selected" value="">工具栏</option>--%>
        </select>
            编辑器：<select id="editor-area-theme-select">
            <%-- <option selected="selected" value="">编辑器</option>--%>
        </select>
            预览区：<select id="preview-area-theme-select">
            <%--<option selected="selected" value="">预览区</option>--%>
        </select>
        </div>
        <div class="input-group btns d-title-wapper">
            <span class="input-group-addon label-info" id="basic-addon1">标题</span>
            <input id="articleTitle" type="text" class="form-control" placeholder="文章标题" aria-describedby="basic-addon1"
                   value="${articleVo.title}"/>
            <span id="edit_fb" class="input-group-addon btn-default">发表博文</span>
            <a id="edit_clane" class="input-group-addon btn-danger"
               href="/${articleVo.userAccount}/article/details/${articleVo.id}">不保存并退出</a>
        </div>

        <input type="hidden" id="articleId" value="${articleVo.id}">
        <input type="hidden" id="userAccount" value="${articleVo.userAccount}">

        <div style="height: 700px;margin-top: -13px">
            <div id="test-editormd"></div>
        </div>

        <div id="openArtSubmit" class="modal fade" role="dialog" aria-labelledby="editDialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                        </button>
                        <h4 class="modal-title" id="editDialog"><strong>博文属性设置</strong></h4>
                    </div>
                    <div class="modal-body">
                        <form id="edit-form" class="form-horizontal">
                            <input type="hidden" name="id" value="${articleVo.id}"/>
                            <article class="media art-list-box">
                                <div class="media-left">
                                    <a href="javascript:void(0);">
                                        <img id="summaryImg" class="media-object"/>
                                        <input type="hidden" name="summaryImg"/>
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">
                                        <a href="javascript:void(0);" id="a_art_title">${articleVo.title}</a>
                                    </h4>
                                    <textarea class="summary" name="summary" placeholder="博文摘要,最多128个字符...">${articleVo.summary}</textarea>

                                    <p class="tip_p"><span class="icon-exclamation-sign"></span> 会自动提取文章中第一张图片作为列表的封面,只能是本站上传的图片，才能被正确显示</p>
                                </div>
                            </article>
                            <p class="tip_p"><span class="icon-exclamation-sign"></span> 请给文章分配标签,最多5个标签</p>
                            <input id="tagInput" type="text" name="tagNames" class="form-control" value="${articleVo.tagNames}"/>

                            <p class="tip_p"><span class="icon-exclamation-sign"></span> 请给文章添加分类，最多5个分类</p>
                            <input id="catInput" type="text" name="categoryNames" value="${articleVo.categoryNames}"/>

                            <div class="casList">
                                <p class="padding-t10b10">分类备选列表：
                                    <c:forEach items="${articleVo.categorysAll}" var="cat">
                                        <c:choose>
                                            <c:when test="${fn:contains(articleVo.categoryNames,cat.name)}">
                                                <span class="label label-default" catName="${cat.name}">${cat.name}</span>
                                            </c:when>
                                            <c:otherwise>
                                                <span class="label label-primary" catName="${cat.name}">${cat.name}</span>
                                            </c:otherwise>
                                        </c:choose>
                                    </c:forEach>
                                </p>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button id="edit_submit" type="button" class="btn btn-primary">发布</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</div>
</body>
</html>
<!-- ********* bootstrap start ********* -->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="/assets/lib/jquery/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/assets/lib/bootstrap/js/bootstrap.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="/assets/lib/bootstrap/js/html5shiv.min.js"></script>
<script src="/assets/lib/bootstrap/js/respond.min.js"></script>
<![endif]-->
<!-- ********* bootstrap end ********* -->
<script src="/assets/lib/md/js/editormd.js"></script>
<script src="/assets/js/common/tagutil.js"></script>
<script src="/assets/lib/artTemplate-master/template.js"></script>
<script src="/assets/lib/mrcode/poplayer/poplayer.js"></script>
<script type="text/javascript" src="${basePath}/assets/lib/mrcode/ui.js"></script>
<script src="/assets/js/common/comm.js"></script>
<script src="/assets/js/common/fieldValidate.js"></script>
<script src="/assets/js/article-edit.js"></script>